<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>React Tutorial</title>
    <script src="../js/lib/react.min.js"></script>
    <script src="../js/lib/react-dom.min.js"></script>
    <script src="../js/lib/jquery.min.js"></script>
    <script src="../js/lib/browser.min.js"></script>
    <script src="../js/lib/marked.js"></script>
  </head>

  <body>
    <div id="content"></div>
    <script type="text/babel">
    // tutorial1.js
    var Comment = React.createClass({
      rawMarkup: function(){
        var rawMarkup = marked(this.props.children.toString(),{sanitize:true});
        return { __html:rawMarkup};
      },
      render: function(){
        return (
          <div className="comment">
            <h2 className="commentAuthor">
              {this.props.author}
            </h2>
            <span dangerouslySetInnerHTML={this.rawMarkup()} />
          </div>
        );
      }  
    });


    var CommentList = React.createClass({
      render:function(){
        var commentNodes = this.props.data.map(function(comment){
          return (
            <Comment author={comment.author}>
              {comment.text}
            </Comment>
          );
        });
        return (
          <div className="commnetList">
            {commentNodes}
          </div>
        );
      }  
    });

    var CommentForm = React.createClass({
      render:function(){
        return (
          <form className="commentForm" onSubmit={this.handleSubmit}>
            <input type="text" ref="author" placeholder="Your name" /><br/>
            <input type="text" ref="text" placeholder="Say something..." /><br/>
            <input type="submit" value="Post" />
          </form>
        );
      },

      handleSubmit:function(e){
        e.preventDefault();
        var author = this.refs.author.value.trim();
        var text = this.refs.text.value.trim();
        console.log(author,text);
        if (!text || !author) {
          return;
        }
        this.props.onCommentSubmit({author:author,text:text});
        this.refs.author.value = '';
        this.refs.text.value = '';
        return;
      }

    });


    var localData = [
      {author: "Pete Hunt", text: "local: comment a"},
      {author: "Jordan Walke", text: "local: *another* comment"}
    ];

    var CommentBox = React.createClass({
      getInitialState:function(){
        return {data:[],err:null};
      },

      loadListFromServer:function(){
        $.ajax({
          url:this.props.url+'/list',
          dataType:'json',
          cache:false,
          success:function(data){this.setState({data:data});}.bind(this),
          error:function(xhr){this.setState({err:xhr.responseText});}.bind(this)
        });
      },

      componentDidMount:function(){
        this.loadListFromServer();
        // setInterval(this.loadListFromServer,10000);
      },

      handleCommentSubmit:function(comment){
        // TODO: submit to the server and refresh the list
        var comments = this.state.data;
        var newComment = comments.concat([comment]);
        console.log(newComment);
        this.setState({data:newComment});

        $.ajax({
          url: this.props.url,
          dataType: 'json',
          type: 'POST',
          data: comment,
          success: function(data) {
           this.setState({data: data});
          }.bind(this),
          error: function(xhr, status, err) {
            console.error(this.props.url, status, err.toString());
          }.bind(this)
        });
      },

      render:function(){
        return ( // must have bracet(), return xxx => return (xxx)
          <div className="CommentBox">hello world
            <h1>comments </h1>
            <CommentList data={this.state.data}/>
            <CommentForm onCommentSubmit={this.handleCommentSubmit}/>
          </div>
        );
      }
    });

    ReactDOM.render(
      <CommentBox url="/forum/v1/comment"/>,
      // <CommentBox />,
      // document.getElementById('content')
      $('#content')[0]
    );
    </script>
  </body>
</html>